<template>
  <!-- :title="titleMap[mode]" -->
  <a-modal
    style="width: 50%"
    title="当事人维护门店"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false">
    <div style="margin-top: 12px;">
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules">
        <a-form-model-item label="当事人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partyIds">
          <a-spin :spinning="spinning" tip="加载中...">
            <a-select
              :show-search="false"
              placeholder="请选择人员"
              @popupScroll="popupScroll"
              @change="change"
              optionFilterProp="children"
              mode="multiple"
              v-model="addForm.partyIds"
              showSearch
              :allow-clear="true"
              @search="onSearch"
              :field-names="{ label: 'name', value: 'partyId' }"
              :option="EmployeesList">
              <a-select-option v-for="(item, index) in EmployeesList" :key="index" :value="item.partyId">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-spin>
        </a-form-model-item>
      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>

import { getMaintenances, maintenancesStores } from '@/api/stores'
import { orgEmployees } from '@/api/staff'
export default {
    components: {},
    data () {
        return {
            addRules: {
                partyIds: [
                    { required: true, message: '请输入门店名称!', trigger: 'blur' }
                ]
            },
            addForm: {
                partyIds: []
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },

            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: '',
            EmployeesList: [],
            // 人员
            pageNo: 1,
            max: false,
            spinning: false,
            pageSize: 10,
            searchWorld: '',
            total: 0
        }
    },
    mounted () {

    },
    methods: {
        change (val) {
            console.log(val)
            this.addForm.partyIds = val
        },
        // 显示
        open (row) {
            console.log(row)
            this.addForm.storeId = row.storeId
            this.visible = true
            this.loadDatas()
            getMaintenances(row.storeId).then(res => {
                if (res.code == 200) {
                    if (res.data.length == 0) return
                    // this.addForm.partyIds=res.data
                    const party = res.data
                    if (res.data.length > 0) {
                        this.addForm.partyIds = party.map(item => {
                        return item.partyId
                    })
                    } else {
                        this.addForm.partyIds = party
                    }

                    console.log(res.data)
                }
                console.log(res)
            })

            return this
        },
        // 加载员工数据
        loadDatas () {
            this.pageNo = 1
            var param = {
                current: this.pageNo,
                pageSize: this.pageSize,
                name: this.searchWorld,
                organizationId: ''
            }
            orgEmployees(param).then((res) => {
                if (res.code == 200) {
                    this.EmployeesList = res.data.datas
                    this.total = res.data.total
                }
            })
        },
        // 下拉框搜索方法
        onSearch (val) {
            if (val.length != 0) {
                this.searchWorld = val
                this.EmployeesList = []
                this.max = false
                this.loadDatas()
            } else {
                this.searchWorld = ''
                this.EmployeesList = []
                this.max = false
                this.loadDatas()
            }
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.addForm.partyIds = []
            this.EmployeesList = []
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    maintenancesStores(this.addForm).then(res => {
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.visible = false
                            this.$emit('success')
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        },
        // 滚动条滚动监听方法
        async popupScroll (e) {
            const that = this
            const { target } = e
            const scrollHeight = target.scrollHeight - target.scrollTop // 滑动总高度
            const clientHeight = target.clientHeight // 滑动最低高度
            // 当下拉框滚动条到达底部的时候
            if (!this.max && scrollHeight < clientHeight + 2) {
                this.spinning = true
                // 数据起始条数
                this.pageNo++
                var newList = []
                var param = {
                    current: this.pageNo,
                    pageSize: this.pageSize,
                    name: this.searchWorld,
                    organizationId: ''
                }
                await orgEmployees(param).then((res) => {
                    if (res.code == 200) {
                        newList = res.data.datas
                        that.total = res.data.total
                        if (newList.length == 0) {
                            that.max = true
                        }
                    }
                })
                if (that.total != this.EmployeesList.length) {
                    // 数据追加
                    this.EmployeesList = this.EmployeesList.concat(newList)
                }
                this.spinning = false
            }
        }
    }
}
</script>
<style scoped lang="less" ></style>
